<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>测试任务</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card>
      <!-- 搜索区域 -->
      <el-row :gutter="20">
        <el-col :span="6">
          任务名称:
          <el-input
            v-model="queryInfo.task_name"
            placeholder="请输入任务名称"
            @input="getTesttaskList()"
            clearable
            size="small"
          >
          </el-input>
        </el-col>
        <el-col :span="6">
          执行状态:
          <el-select
            v-model="queryInfo.result"
            placeholder="请选择"
            size="small"
            clearable
            @change="selectChange"
          >
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </el-card>

    <el-card style="margin-top: 10px">
      <!-- 测试用例列表区域 -->
      <el-table :data="testtaskList" border stripe>
        <el-table-column
          label="#"
          type="index"
          reserve-selection
        ></el-table-column>
        <el-table-column label="任务" prop="task_name"> </el-table-column>
        <el-table-column label="执行结果" prop="result">
          <!-- <template slot-scope="scope">
            <span v-if="scope.row.result == 'pending'">
            </span>
          </template> -->
        </el-table-column>
        <el-table-column label="开始时间" prop="create_time"></el-table-column>
        <el-table-column label="执行时长" prop="duration">
        </el-table-column>
        <el-table-column
          label="通过脚本数"
          prop="success_num"
        ></el-table-column>
        <el-table-column label="总脚本数" prop="total_num"></el-table-column>
        <el-table-column label="通过率" prop="rate"></el-table-column>
        <el-table-column
          label="jenkins任务全称"
          prop="full_display_name"
        ></el-table-column>
        <el-table-column label="操作" fixed="right" width="100">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="showDetail(scope.row)">查看</el-button>
            <el-button size="mini" type="text" @click="refresh(scope.row.task_id)">刷新</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page_num"
        :page-sizes="[10, 20, 40, 80]"
        :page-size="queryInfo.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 查询条件参数
      queryInfo: {
        task_name: "",
        result: "",
        // 当前的页数
        page_num: 1,
        // 当前每页显示多少条数据
        page_size: 10,
      },
      status: [
        {
          value: "pending",
          label: "未执行",
        },
        {
          value: "executing",
          label: "执行中",
        },
        {
          value: "SUCCESS",
          label: "执行成功",
        },
        {
          value: "UNSTABLE",
          label: "不稳定",
        },
        {
          value: "FAILURE",
          label: "执行失败",
        },
      ],
      // 测试任务数据列表
      testtaskList: [],
      // 脚本总数
      total: 0,
    };
  },
  created() {
    this.getTesttaskList();
  },
  methods: {
    // 获取测试任务数据
    async getTesttaskList() {
      const { data: res } = await this.$http.post(
        "/testtask/list",
        this.qs.stringify(this.queryInfo)
      );
      // 查询失败
      if (res.code !== 200) {
        return this.$message.error("获取用例数据失败");
      }
      for(var i=0; i<res.data.length; i++){
        if(res.data[i].duration !== null){
          res.data[i].duration = this.$common(res.data[i].duration/1000)
        }
      }
      this.testtaskList = res.data;
      this.total = res.count;
    },
    // 监听状态值改变的事件
    selectChange(value) {
      console.log(value);
      this.getTesttaskList();
    },

    // 监听 pageSize 改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.page_size = newSize;
      this.getTesttaskList();
    },

    // 监听页码值改变的事件
    handleCurrentChange(newPage) {
      // console.log(newPage)
      this.queryInfo.page_num = newPage;
      this.getTesttaskList();
    },

    // 查看详情
    async showDetail(row) {
      this.$router.push({ path: "/testresult", query: { id: row.task_id } });
    },
	
	// 刷新
    async refresh(task_id) {
      //   console.log(confirmResult);
      const { data: res } = await this.$http.post(
        "/testtask/refresh",
        this.qs.stringify({ task_id: task_id })
      );
      if (res.code != 200) {
        return this.$message.error(res.msg);
      }
      this.$message.success(res.msg);
      this.getTesttaskList();
    },
  },
};
</script>

<style lang="less" scoped>
.el-input {
  width: auto;
}
</style>
